<section id="section_1">
  <div class="index" id="two">1</div>
  <h2>Hear some samples!</h2>

文本触发部分
        <p id="afterTraining" hidden>🆕🆕🆕 This new model we trained learned to summarize those 256 sliders as 4 <b>super sliders</b>. The super sliders
          control the features that make the random samples sound like your input. When you use them, the sample won't
          randomly change like it does when you use the regular sliders.
        </p>

        <b><p id="loadingStatus">Loading model...</p></b>

        <p>
          You can also <button class="button" id="btnSample" disabled>get another sample</button>
          whenever you want.
        </p>


  <div id="afterLoading" hidden>
    <div class="horizontal">
      <div class="sliders-container blue" id="midimeSlidersContainer" hidden>
        <p>✨<b>super</b> sliders!✨</p>
        <div class="sliders horizontal" id="midimeSliders">
          <div class="range-wrap"><input type="range" data-index="0" min="-1" max="1" step="0.1" value="0"></div>
          <div class="range-wrap"><input type="range" data-index="1" min="-1" max="1" step="0.1" value="0"></div>
          <div class="range-wrap"><input type="range" data-index="2" min="-1" max="1" step="0.1" value="0"></div>
          <div class="range-wrap"><input type="range" data-index="3" min="-1" max="1" step="0.1" value="0"></div>
        </div>
      </div>

      <div class="sliders-container green">
        <p>use these sliders to change some features of the sample</p>
        <svg id="lines"></svg>
        <div class="sliders horizontal" id="mvaeSliders"></div>
      </div>
    </div>

    <p>And this is what that sample sounds like:</p>
    <div class="relative">
      <div class="visualizer-container cream">
        <button id="btnPlaySample" class="button-circle" aria-label="play">
          <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
        </button>
        <svg id="vizSample"></svg>
      </div>
    </div>
    <br>
    <button id="saveBtn" class="button">save this sample</button>
    <br>
    <p id="helpMsg">The thing about MusicVAE is that it only knows generic music; when you ask it for
      a sample, it just picks something from the space of all possible melodies. It can't
      give you something that sounds more like Twinkle Twinkle Little Star, or more like your
      favourite Beatles song, without having to be retrained on a new corpus of data, and that
      takes several days on a really big GPU (not to mention millions of data points!)
      Enter....<b>Midi Me!</b></p>
  </div>
</section>
